<template>
  <section :id="'tinymce_' + editorId">
    <!-- <slot></slot> -->
  </section>
</template>

<script>
import "../tinymce.min.js";
import "../themes/silver/theme.min.js";
import "../langs/zh_CN.js";
import "../icons/default/icons.min.js";
import "../plugins/image/plugin.min.js";
import "../plugins/imagetools/plugin.min.js";
import "../plugins/charmap/plugin.min.js";
import "../plugins/code/plugin.min.js";
import "../plugins/lineheight/plugin.min.js";
import "../plugins/paste/plugin.min.js";
import "../plugins/powerpaste/plugin.min.js";
import "../plugins/kityformula-editor/plugin.min.js";
import { nanoid } from "nanoid";
// import '../plugins/tiny_mce_wiris/plugin.min.js'
// import '../plugins/wiris/mathtype-tinymce5/plugin.min.js'
export default {
  props: {
    html: {
      type: String,
      default: "",
    },

    readonly: {
      type: Number,
      default: 0,
    },
  },

  model: {
    prop: "html",
    event: "text-changed", // 编辑器的内容发生变化后触发, 参数为编辑的 HTML
  },

  data() {
    return {
      editor: null,
      toolbar:
        "fontsizeselect lineheight undo redo bold italic underline underscoreButton indent outdent superscript subscript alignleft aligncenter alignright removeformat charmap code image paste tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry",
      uploadMode: 0,
      editorId: nanoid(),
      obj: {},
    };
  },
  beforeDestroy() {
    // 销毁编辑器
    // this.editor.remove();
  },
  watch: {
    html: {
      immediate: true,
      handler() {
        this.editorHtml();
      },
    },
  },
  mounted() {
    this.initTiny();
  },
  methods: {
    initTiny() {
      const self = this;
      tinymce
        .init({
          selector: `#tinymce_${this.editorId}`,
          height: 400,
          readonly: this.readonly,
          inline: true,
          toolbar: this.toolbar,
          fontsize_formats: "11px 12px 14px 16px 18px",
          plugins: "image charmap paste lineheight tiny_mce_wiris",
          external_plugins: {
            tiny_mce_wiris:
              "https://www.moofen.net/assets/mathType/wiris/mathtype-tinymce5/plugin.min.js",
          },
          advlist_bullet_styles: "circle, square",
          content_style: "img {max-width:100%;}",
          autoresize_max_height: 20,
          language: "zh_CN",
          content_css: false,
          // auto_focus: true,
          menubar: false,
          paste_data_images: true,
          images_file_types: "jpeg,jpg,png,gif,bmp,webp",
          paste_enable_default_filters: true,
          paste_word_valid_elements:
            "table[width],tr,td[colspan|rowspan|width],th[colspan|rowspan|width],thead,tfoot,tbody,h1,h2,h3,h4,h5,img,p",
          paste_auto_cleanup_on_paste: true,
          paste_remove_styles: true,
          paste_remove_styles_if_webkit: true,
          paste_strip_class_attributes: true,
          paste_retain_style_properties: "color",
          paste_webkit_styles: "color",
          paste_convert_word_fake_lists: false,
          paste_merge_formats: true,
          lineheight_formats: "1 1.5 2 2.5",
          paste_postprocess: function(plugin, args) {
            args.node.childNodes.forEach((item) => {
              // item.setAttribute('class','question_line')
              // item.removeAttribute('style')
              args.content = item.childNodes;
            });
          },
          setup: function(editor) {
            // 创建工具栏按钮
            // 添加上传图片按钮
            editor.ui.registry.addButton("image", {
              icon: "image",
              title: "插入图片",
              onclick: () => {},
            });

            // 编辑器内容发生变化后更新 html 的内容
            editor.on("blur", (e) => {
              let obj = {
                val: editor.getContent(),
                tinyHeight: document.getElementById(e.target.id).offsetHeight,
                tinyId: e.target.id,
              };
              // 判断是否使用了公式插件
              let wrs_stack = document.querySelectorAll("div.wrs_stack");
              if (wrs_stack.length <= 0) {
                self.$emit("tinymce-change", obj);
              }
            });
            /* underscore button that just inserts the date  自动添加下划线 */
            editor.ui.registry.addButton("underscoreButton", {
              icon: "straight-line",
              tooltip: "自动添加下划线",
              onAction: () => {
                editor.insertContent(
                  '<span style="text-decoration: underline">&ensp;&ensp;&ensp;&ensp;</span>'
                );
              },
            });
            // 注册一个工具栏按钮名称
            editor.ui.registry.addButton("tiny_mce_wiris", {
              tooltip: "公式插件",
              onAction: function() {},
            });
          },
          images_upload_handler(blobInfo, success, failure) {
            // 假设你有一个Blob对象
            const blob = new Blob([blobInfo.blob()], { type: "image/jpg" });

            // 创建一个FileReader实例
            const reader = new FileReader();

            // 定义读取完毕时的处理函数
            reader.onload = (event) => {
              // event.target.result就是转换后的Base64字符串
              const base64String = event.target.result;
              success(base64String);
            };

            // 使用FileReader的readAsDataURL方法转换Blob为Base64
            reader.readAsDataURL(blob);
          },
        })
        .then((editors) => {
          // let ele = document.querySelector('#tinymce_'+ this.editorId)
          setTimeout(() => {
            this.editor = editors[0];
            if (this.editor) {
              this.editor.setContent(this.html);
            }
          }, 1000);
          // if(ele){
          //   ele.innerHTML = this.html
          // }
        });
    },
    editorHtml() {
      if (this.editor) {
        this.editor.setContent(this.html);
      }
    },
  },
};
</script>

<style lang="less">
@import url("../skins/ui/oxide/skin.min.css");
@import url("../skins/ui/oxide/content.min.css");

.tox {
  .tox-tbtn--bespoke {
    .tox-tbtn__select-label {
      width: 4em;
    }
  }

  .tox-tbtn {
    height: 30px;
  }

  .tox-toolbar__group {
    height: 30px;
    border-bottom: 1px solid #ddd;
  }
}

.rich-text {
  // 微调 Full featured 的编辑器阴影, 工具栏阴影
  .mce-tinymce {
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.25);

    .mce-top-part::before {
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }
  }

  // inline 模式的边框和得到焦点的样式
  .mce-content-body {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;

    &.mce-edit-focus {
      outline: none;
      border-color: #47a4f5;
      box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1) inset;
    }
  }

  .mce-notification {
    display: none;
  }
}

// 工具栏样式: 缩小字体, 修改按钮的 hover 背景色等
.mce-panel {
  border: none !important;

  .mce-toolbar .mce-btn-group {
    padding: 0;

    &:not(:first-child) {
      margin-left: 0;
    }

    .mce-btn {
      margin-left: 0;

      &:hover {
        border-color: transparent;
        background: #808695;
        color: white;

        .mce-ico,
        button {
          color: white;
        }
      }

      .mce-ico {
        font-size: 14px;
      }
    }
  }
}
</style>
